<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> -->
 <link rel="stylesheet" type="text/css" href="travIT_homepagestyle.css">
 <link href="css/demo.css" rel="stylesheet" type="text/css"/> 
<link href="css/jtabs.css" rel="stylesheet" type="text/css"/> 
<link href='css/style.css' rel='stylesheet' type='text/css' />
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link href='tabbedContent.css' rel='stylesheet' type='text/css' />
		<script src="tabbedContent.js" type="text/javascript"></script>
		
<script language="javascript" src="script/jquery-1.2.6.pack.js"></script> 
<script language="javascript" src="script/jquery.layoutengine.min.js"></script> 
<script language="javascript" src="script/jquery.jtabs.js"></script> 
<script language="javascript" src="script/jquery.haschange.js"></script> 
<script language="javascript" type="text/javascript"> </script>
<script>
$(document).ready(function(){
    var homepageurl="http://localhost/homepage.html";
    var loginurl="http://localhost/login.html";
    var registerationurl="http://localhost/registeration_page.html";
    var layoutSettings =
    {
        Name    :   "Main",
        Dock    :   $.layoutEngine.DOCK.FILL,
        EleID   :   "main",        
        Children:   [
                        {
                            Name    :   "Top",
                            Dock    :   $.layoutEngine.DOCK.TOP,
                            EleID   :   "top",                           
                            Height  :   $(document).height()/5
                        },
                        {
                            Name    :   "Left",
                            Dock    :   $.layoutEngine.DOCK.LEFT,
                            EleID   :   "left",                          
                            Width   :   $(document).width()/6
                        },
                        {
                            Name    :   "Fill",
                            Dock    :   $.layoutEngine.DOCK.FILL,
                            EleID   :   "fill"
                        },
                        {
                            Name    :   "Right",
                            Dock    :   $.layoutEngine.DOCK.RIGHT,
                            EleID   :   "right",                           
                            Width   :   $(document).width()/6
                        },
                        {
                            Name    :   "Bottom",
                            Dock    :   $.layoutEngine.DOCK.BOTTOM,
                            EleID   :   "bottom",
                            Height  :   $(document).height()/12
                        }
                    ]
             
    };
    
    $.layoutEngine(layoutSettings);
$("#barcode_generate").click(function(){
var barcode_name=$("#barcode_name").val();
if(barcode_name!=null){
var barcodeSRC="http://api.qrserver.com/v1/create-qr-code/?data="+barcode_name;
var barcodeImage="<img id='theImg' src="+barcodeSRC+"&amp;size=100x100/>";
myWindow=window.open('','','');
myWindow.document.write('<link rel="stylesheet" type="text/css" href="travIT_homepagestyle.css">');
myWindow.document.write('<table id="listOfBarCodes">');
myWindow.document.write("<tr><div id='barCodeID'><center><b><h1>Vendor Name</h1></b><br><h3>Product Name<h3></center>Vendor Address"+barcodeImage+"</tr></div>");
myWindow.document.write("<tr><div id='barCodeID'><center><b><h1>Vendor Name</h1></b><br><h3>Product Name<h3></center>Vendor Address"+barcodeImage+"</tr></div>");
myWindow.document.write("<tr><div id='barCodeID'><center><b><h1>Vendor Name</h1></b><br><h3>Product Name<h3></center>Vendor Address"+barcodeImage+"</tr></div>");
myWindow.document.write("<tr><div id='barCodeID'><center><b><h1>Vendor Name</h1></b><br><h3>Product Name<h3></center>Vendor Address"+barcodeImage+"</tr></div>");
myWindow.document.write('</table>');
myWindow.focus();
}
        });
        
        $("#logout").click(function(){
        	window.location=loginurl;
        	alert("LoggedOut!");

        });
        
        populateUserProfile();
        
        function populateUserProfile(){
			var a=document.URL;
			var username=a.split("username=");
			username=username[1];
			$.get("http://localhost/travIT.php",{"username":username},function(response){
				//alert(response+":");
				var table={};
				var responseString=response.split(",");
				for(var i=0;i<responseString.length;i=i+2){
					temp=i+1;
					if(i==0){
					responseString[i]=jQuery.trim(responseString[i]);
					}
					console.log(responseString[i]);
					console.log(responseString[temp]);
					table[responseString[i]]=responseString[temp];
					}
				console.log(table);
				console.log(table["username"]);
				console.log("status:"+table['status']);
				if(table['status']=="Wrong Password"){
					alert("Please Login again!");
					window.location=loginurl;
				}else{

				$("p#cell1").append("<div id='personalInfo'>\
					<center><b><h4>Personal Information</h4></center>\
					<label id='profile'>User Name:</label><span id='firstName'>"+table['username']+"</span><br><br>\
					<label id='profile'>Email:</label><span id='email'><input type='text' value="+table['email']+"></span><br><br>\
					<label id='profile'>User Type:</label><span id='firstName'>"+table['usertype']+"</span><br><br>\
					<label id='profile'>Phone Number:</label><span id='phoneNumber'><input type='text' value="+table['phone number']+"></span><br><br>\
					<label id='profile'>Address:</label><span id='address'><input type='text' value="+table['address']+"></span><br><br>\
					<input type='button' id='updateProfileButton' value='Update Profile'>\
					</div>");								
				}
			});
        }
        
        /*
		$("#demo").jTabs({
				nav: "ul#tabs-nav",
				tab: ".content .data",
				effect: "fadeIn", //slide, fade, slideDown, ""
				hashchange: false
			});
			$(window).scroll();
		*/

});
</script> 
<title>Docking Demo</title> 
<style type="text/css"> 
html
{
	overflow:hidden;
}
</style> 
</head> 
<body> 
<div id="main"> 
	<div id="top" style="background-color:#333333"> 
		<img src="TrackImage" id="header"/>rack & <img src="ValidateImage" id="header"/>alidate IT
		<input type="button" value="Logout!" id="logout"/> 
	</div> 
	<div id="left" style="background-color:#993300"> 

	</div> 
	<div id="fill" style="background-color:white"> 
		
			<div class='content'>				
				<div class='tabbed_content'>
					<div class='tabs'>
						<div class='moving_bg'>
							&nbsp;
						</div>
						<span class='tab_item'>
							Manage Profile
						</span>
						<span class='tab_item'>
							Search Stores
						</span>
						<span class='tab_item'>
							Search Product
						</span>
						<span class='tab_item'>
							Track Product
						</span>
					</div>
					
					<div class='slide_content'>						
						<div class='tabslider'>
							<p id="cell1">	
							</p>
							<p id="cell2">
								Data Cell 2
							</p>
							<p id="cell3">	
								Data Cell 3
							</p>
							<p id="cell4">	
								Data Cell 4
							</p>
						</div>
						<br style='clear: both' />
					</div>
				</div>
				
				
			</div>
			
		</div>
	</div>	
	<div id="right" style="background-color:#9900CC"> 

        <input type="text" id="barcode_name"/><br>
	<button type="button"  id="barcode_generate">Generate barcode!</button>
	</div> 
	<div id="bottom" style="background-color:#CCCCCC"> 
	<img src="noimage.jpeg"> &copy</img>
	<a href="#">Contact us </a>
	<a href="#">Help</a>
	<a href="#">About TravIT</a>

	</div> 
	

</div> 
</body> 
</html> 
